<template>
    <div class="create">
        <div class="edit">
            <button @click="log()">打印</button>
            <button @click="add()">添加</button>
            <button @click="save()">保存</button>
            <button @click="delTitle()">删除最后一题</button>

            <el-select v-model="choiceType" placeholder="请先选好类型再添加">
            <el-option
                v-for="item in typeForm"
                :key="item.type"
                :label="item.label"
                :value="item.type">
            </el-option>
            </el-select>
        </div>
        <br/><br/><br/>
        <div class="items">
            <div v-for="(item,index) in items" :key="index" >
                <singlechoice v-if="item.type==1"><p> {{item}}:::{{index}}</p></singlechoice>
                <multichoice v-if="item.type==2"></multichoice>
                <inputbox v-if="item.type==3"></inputbox>
                <br/><br/><br/>
            </div>  
        </div>
    </div>
</template>

<script>
//关于对类型的控制，使用if--else进行选择判断
import singlechoice from './options/singleChoice';
import multichoice from './options/multiChoice'
import inputbox from './options/inputBox'

export default {
    data () {
        return {
            test:{},
            count: 1,
            choiceType: 1,         //添加类型
            typeForm:[{             //类型选择框
                type: 1,
                label: '单选'
            },{
                type: 2,
                label: '多选'
            },{
                type: 3,
                label: '单填'
            },],
            items:[{                //存储题目的信息
                index: 0,
                num:1,              //题目编号
                title: '',
                type:1,             //题目的类型，1：单选；2：多选；3：单填 
                content:[]             //题目的内容（选项，包括选项号以及选项）  
                },{
                index: 1,
                num:2,    
                type:2,
                title: '',
                content:[]
                },{
                index: 2,
                num:3,
                type:2,
                title: '',
                content:[]
                }
            ],
            survey
           
        }
    },
    methods: {
      add(){
          this.items.push({type:this.choiceType,
          content:{name:1},
          title: ''
          });
      },
      log(){
        //   console.log(this.$children);
        //  this.test=this.$children[1].items;
        //   console.log(this.test);
        console.log(this.items)
      },
      save(){
          for(var index in this.items){
            // console.log(typeof(this.count));
            // console.log(this.$children[this.count]);
            // console.log(this.items[index])
            this.items[index].content=this.$children[this.count].items;
            this.items[index].title=this.$children[this.count].title;
            this.count++;
          }
          this.count=1;

            //将数据发送到后台
            this.$axios.post('http://localhost:8082/post',{
            
            items: this.items
        })
        .then(res=>{
            console.log(res);
        })

      },
      delTitle(){
          this.items.pop();  

      }  
    },
    components: {
        singlechoice,
        multichoice,
        inputbox
    },

}
</script>
<style>
.create{
    float:bottom;
}

.items{

    top: 220px;
   float: inherit;   
}
</style>